<template>
<div id="">
  <div class="container">
    <div class="row ">
      <input type="text" v-model="data" @keyup="get($event)" class="form-control" placeholder="输入相关信息">
      <div class="col-sm-12 col-md-12 ">
        <div class="thumbnail clearfix" v-for="item in list">
          <h3>{{item.title}} ({{item.year}})</h3>
          <img :src="item.images.large" alt="" class="tu pull-left" />
          <div class=" caption pull-left">
            <p>导演：<span  v-for="name in item.directors">{{name.name}}&nbsp;</span> </p>
            <p>主演：<span v-for="name in item.casts">{{name.name}}&nbsp;</span></p>
            <p>类型： <span v-for="name in item.genres">{{name}} / </span></p>
            <p>上映日期：{{item.year}}年</p>
            <p>评分：{{item.rating.average}}</p>
            <!-- <p>又名：<span v-for="names in list.aka">{{names}}/</span></p>  -->
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
</template>
<script>
export default {
  name: "",
  data() {
    return {
      list: [],
      data: ""
    }
  },
  methods: {

    get(ev) {
      if (ev.keyCode == 13) {
         this.axios({
          url: "/api/v2/movie/search?q="+this.data,
          method: "get"
        }).then((res) => {
          this.list = res.data.subjects

        })
      }

    }
  }
}
</script>
<style scoped>
.tu {
  margin-left: 0;
  max-width: 150px;
}
</style>
